<template>
  <div>
    <!-- 顶部 -->
    <div class="top">
      <span class="fu" @click="fun($event)">&lt;</span>
      <span class="i">安全中心</span>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <img src="@/assets/ayuan/images/images/anquan1_02.gif" alt="" />
    <!-- 信息管理 -->
    <div class="nav">
      <span class="nav-a">信息管理</span>
      <section>
        <div class="nav-b">
          <span class="iconfont green">&#xe605;</span>
          <p>渠道安全锁</p>
        </div>
        <div class="nav-b">
          <span class="iconfont blue">&#xe626;</span>
          <p>登陆密码</p>
        </div>
        <div class="nav-b">
          <span class="iconfont blue">&#xe7ba;</span>
          <p>预留信息</p>
        </div>
        <div class="nav-b">
          <span class="iconfont red">&#xe613;</span>
          <p>注册手机银行</p>
        </div>
        <div class="nav-b">
          <span class="iconfont red">&#xe69c;</span>
          <p>个性化限额设置</p>
        </div>
        <div class="nav-b">
          <span class="iconfont gray">&#xe713;</span>
          <p>更多</p>
        </div>
      </section>
    </div>
    <!-- 授权管理 -->
    <div class="nav">
      <span class="nav-a">授权管理</span>
      <section>
        <div class="nav-b">
          <span class="iconfont red">&#xe605;</span>
          <p>绑定设备</p>
        </div>
        <div class="nav-b">
          <span class="iconfont blue">&#xe607;</span>
          <p>快捷支付管理</p>
        </div>
        <div class="nav-b">
          <span class="iconfont green">&#xe685;</span>
          <p>微信绑定</p>
        </div>
        <div class="nav-b">
          <span class="iconfont red">&#xe619;</span>
          <p>代收管理</p>
        </div>
        <div class="nav-b">
          <span class="iconfont">&#xe660;</span>
          <p>Apple Pay</p>
        </div>
        <div class="nav-b">
          <span class="iconfont gray">&#xe713;</span>
          <p>更多</p>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    fun() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
/*iconfont 图标*/
@font-face {
  font-family: "iconfont";
  src: url("@/assets/iconfont/iconfont.woff2?t=1664011341460") format("woff2"),
    url("@/assets/iconfont/iconfont.woff2?t=1664011341460") format("woff"),
    url("@/assets/iconfont/iconfont.woff2?t=1664011341460") format("truetype");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 0.16rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.top {
  background-color: #2d6cb9;
  color: white;
  display: flex;
  height: 0.6rem;
  .i {
    display: block;
    margin-left: 1.04rem;
    line-height: 0.6rem;
    font-size: 0.2rem;
  }
  .fu {
    font-size: 0.36rem;
    margin-left: 0.16rem;
    // text-align: center;
    line-height: .6rem;
  }
  ul {
    position: absolute;
    right: 0.1rem;
    top: 0.26rem;
  }
  li {
    width: 0.08rem;
    height: 0.08rem;
    border-radius: 50%;
    float: left;
    background-color: white;
    margin-right: 0.06rem;
    list-style: none;
  }
}
img {
  width: 100%;
}
.nav {
  height: 2.2rem;
  margin-bottom: 0.16rem;
  .nav-a {
    display: block;
    height: 0.6rem;
    border-bottom: 0.01rem solid gray;
    line-height: 0.5rem;
    color: #2d6cb9;
    padding-left: 0.2rem;
    font-size: 0.2rem;
  }
  section {
    display: flex;
    flex-wrap: wrap;
  }
  .nav-b {
    width: 1.229rem;
    height: 0.86rem;
    border: 1px solid rgba(128, 128, 128, 0.288);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: center;
    span {
      font-size: 0.26rem;
    }
    p {
      color: gray;
    }
    .green {
      color: green;
    }
    .blue {
      color: #2d6cb9;
    }
    .red {
      color: red;
    }
    .gray {
      color: gray;
    }
  }
}
</style>